import 'package:cached_network_image/cached_network_image.dart';
import 'package:card_swiper/card_swiper.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:yi_shop/route/index.dart';
import 'package:yi_shop/ui/keep_alive.dart';
import 'package:yi_shop/utils/colors.dart';
import 'package:yi_shop/utils/styles.dart';
import 'package:yi_shop/utils/svg.dart';
import 'package:yi_shop/utils/tools.dart';

class NormalInfoController extends GetxController with GetTickerProviderStateMixin {
  late TabController tabController;

  List<String> tabs = ['商品', '详情', '评价'];

  List<String> imgList = [
    'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/188121/38/42831/47009/65f412abF2cc25e9a/8a392fac98bb449c.jpg',
    'https://m.360buyimg.com/mobilecms/s720x720_jfs/t1/109734/14/16837/75158/6464cd3aF5189a9e5/c87d180d20c17a8c.jpg!q70.dpg.webp',
    'https://m.360buyimg.com/mobilecms/s720x720_jfs/t1/107220/18/22056/30958/6464cd41F99cffb41/89a64cba9a055833.jpg!q70.dpg.webp',
    'https://m.360buyimg.com/mobilecms/s720x720_jfs/t1/197240/13/34016/110717/6464cd44Fb279f9fc/5c06beae8697d727.jpg!q70.dpg.webp',
    'https://m.360buyimg.com/mobilecms/s720x720_jfs/t1/88863/40/37768/48964/6464cd4eFbd168d12/a55294426e37d383.jpg!q70.dpg.webp'
  ];

  List<String> productList = [
    '（流光金）i5 8G+256G',
    '（深空灰）i5 8G+256G',
    '（玫瑰金）i5 8G+256G',
    '（流光金）i5 4G+256G'
  ];

  RxInt productIndex = RxInt(-1);

  RxInt productCount = RxInt(1);

  List<String> addressList = [
    '北京市朝阳区望京大厦',
    '北京市海淀区四季青桥西',
    '江苏省淮安市淮安区淮城镇',
    '上海市徐汇区联合创业办公社',
    '上海市浦东新区张江高科技园区'
  ];

  RxInt addressIndex = RxInt(-1);

  RxBool isChange = false.obs;

  late AnimationController animationController;

  late Animation<Offset> animation;

  late AnimationController tController;

  late Animation<Offset> tAnimation;

  RxInt infoTabIndex = 0.obs;

  List<String> infoTab = ['商品介绍', '规格参数', '包装售后'];

  List<String> evaluateList = ['全部2568', '好评1256', '中评1247', '差评102'];

  RxInt evaluateIndex = 0.obs;

  @override
  void onInit() {
    tabController = TabController(length: tabs.length, vsync: this);
    animationController =
        AnimationController(vsync: this, duration: const Duration(milliseconds: 500));
    animation =
        Tween<Offset>(begin: Offset.zero, end: const Offset(0.0, -1.0)).animate(CurvedAnimation(
      parent: animationController,
      curve: Curves.linear,
    ));
    animationController.forward();
    tController = AnimationController(vsync: this, duration: const Duration(milliseconds: 800));
    tAnimation =
        Tween<Offset>(begin: Offset.zero, end: const Offset(0.0, -1.10)).animate(CurvedAnimation(
      parent: tController,
      curve: Curves.linear,
    ));
    tController.reverse();
    super.onInit();
  }

  @override
  void onClose() {
    tabController.dispose();
    animationController.dispose();
    tController.dispose();
    super.onClose();
  }
}

class NormalInfoPage extends GetView<NormalInfoController> {
  const NormalInfoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: controller.tabs.length,
        child: Scaffold(
          appBar: moveAppBar(context),
          body: buildBody(context),
          bottomNavigationBar: SafeArea(
            bottom: true,
            child: Container(
              height: 50,
              color: Colors.white,
              child: Row(
                children: [
                  Expanded(
                      child: Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Expanded(
                          flex: 4,
                          child: Column(
                            children: [
                              Expanded(
                                flex: 3,
                                child: Center(
                                  child: SvgUtils.assetName('u1711', width: 20, height: 20),
                                ),
                              ),
                              Expanded(
                                flex: 2,
                                child: Center(
                                  child: Text(
                                    '店铺',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333,
                                        fontSize: StylesUtils.fontSize12),
                                  ),
                                ),
                              )
                            ],
                          )),
                      Expanded(
                          flex: 5,
                          child: Column(
                            children: [
                              Expanded(
                                flex: 3,
                                child: Center(
                                  child: SvgUtils.assetName('u1699', width: 20, height: 20),
                                ),
                              ),
                              Expanded(
                                flex: 2,
                                child: Center(
                                  child: Text(
                                    '客服',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color3333,
                                        fontSize: StylesUtils.fontSize12),
                                  ),
                                ),
                              )
                            ],
                          )),
                      Expanded(
                          flex: 6,
                          child: Container(
                            padding: EdgeInsets.only(left: 15.w),
                            child: Column(
                              children: [
                                Expanded(
                                  flex: 3,
                                  child: Align(
                                    alignment: Alignment.centerLeft,
                                    child: SvgUtils.assetName('u1705', width: 20, height: 20),
                                  ),
                                ),
                                Expanded(
                                  flex: 2,
                                  child: Align(
                                    alignment: Alignment.centerLeft,
                                    child: Text(
                                      '收藏',
                                      style: StylesUtils.customTextStyle(
                                          color: ColorsUtils.color3333,
                                          fontSize: StylesUtils.fontSize12),
                                    ),
                                  ),
                                )
                              ],
                            ),
                          )),
                    ],
                  )),
                  TextButton(
                      onPressed: () {},
                      style: ButtonStyle(
                          fixedSize: const MaterialStatePropertyAll(Size(110, 50)),
                          alignment: Alignment.center,
                          shape: const MaterialStatePropertyAll(LinearBorder()),
                          backgroundColor: MaterialStatePropertyAll(
                              ColorsUtils.parseColorFromHexString(ColorsUtils.colorF26f))),
                      child: Text(
                        '加入购物车',
                        style: StylesUtils.customTextStyle(
                          fontSize: StylesUtils.fontSize13,
                          color: ColorsUtils.colorFfff,
                        ),
                      )),
                  Container(
                    margin: const EdgeInsets.only(left: 1),
                    child: TextButton(
                        onPressed: () {
                          Get.toNamed(RoutePath.systemOrderConfirmUnContact);
                        },
                        style: ButtonStyle(
                            fixedSize: const MaterialStatePropertyAll(Size(110, 50)),
                            alignment: Alignment.center,
                            backgroundColor: MaterialStatePropertyAll(
                                ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048)),
                            shape: const MaterialStatePropertyAll(LinearBorder())),
                        child: Text(
                          '立即购买',
                          style: StylesUtils.customTextStyle(
                            fontSize: StylesUtils.fontSize13,
                            color: ColorsUtils.colorFfff,
                          ),
                        )),
                  )
                ],
              ),
            ),
          ),
        ));
  }

  Widget buildBody(BuildContext context) {
    if (controller.isChange.isTrue) {
      return buildProductBody(context);
    }
    return TabBarView(
      controller: controller.tabController,
      children: [
        KeepAliveWrapperTabView(child: buildProductBody(context)),
        KeepAliveWrapperTabView(child: buildInfoBody(context)),
        KeepAliveWrapperTabView(child: buildEvaluateBody(context))
      ],
    );
  }

  AppBar moveAppBar(BuildContext context) {
    return AppBar(
      leading: ToolsUtils.builderLeading(),
      title: SizedBox(
        height: 40,
        child: Stack(
          clipBehavior: Clip.hardEdge,
          children: [
            SlideTransition(
              position: controller.tAnimation,
              child: Center(
                child: ToolsUtils.getClientTabBar(controller.tabs, controller.tabController,
                    indicatorColor: ColorsUtils.colorFfff,
                    labelColor: ColorsUtils.colorFfff,
                    labelStyle: StylesUtils.customTextStyle(
                      fontSize: StylesUtils.fontSize18,
                    ),
                    unselectedLabelColor: ColorsUtils.colorE4e4,
                    unselectedLabelStyle: StylesUtils.customTextStyle(
                      fontSize: StylesUtils.fontSize18,
                    )),
              ),
            ),
            SlideTransition(
              position: controller.animation,
              child: const Center(
                child: Text('图文介绍'),
              ),
            ),
          ],
        ),
      ),
      // title: Obx(() {
      //   if (controller.isChange.isTrue) {
      //     return const Text('图文介绍');
      //   }
      //   return ToolsUtils.getClientTabBar(controller.tabs, controller.tabController,
      //       indicatorColor: ColorsUtils.colorFfff,
      //       labelColor: ColorsUtils.colorFfff,
      //       labelStyle: StylesUtils.customTextStyle(
      //         fontSize: StylesUtils.fontSize18,
      //       ),
      //       unselectedLabelColor: ColorsUtils.colorE4e4,
      //       unselectedLabelStyle: StylesUtils.customTextStyle(
      //         fontSize: StylesUtils.fontSize18,
      //       ));
      // }),
      actions: [
        IconButton(onPressed: () {}, icon: SvgUtils.assetName('u1688', width: 20, height: 20))
      ],
    );
  }

  Widget buildProductBody(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverToBoxAdapter(
          child: Container(
            decoration: const BoxDecoration(color: Colors.white),
            height: 360,
            child: Swiper.list(
                list: controller.imgList,
                autoplay: true,
                autoplayDelay: 5000,
                duration: 500,
                itemHeight: 360,
                pagination: SwiperPagination(
                  alignment: Alignment.bottomRight,
                  margin: const EdgeInsets.only(top: 10, bottom: 10, right: 15),
                  builder: SwiperCustomPagination(
                      builder: (BuildContext context, SwiperPluginConfig config) {
                    return Container(
                      constraints: const BoxConstraints.expand(width: 60, height: 30),
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(15),
                          color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorCccc)),
                      child: Text(
                        '${config.activeIndex + 1} / ${config.itemCount}',
                        style: StylesUtils.customTextStyle(),
                      ),
                    );
                  }),
                ),
                builder: (_, url, index) {
                  return CachedNetworkImage(
                    imageUrl: url,
                    height: 360,
                    width: double.infinity,
                    fit: BoxFit.fill,
                  );
                }),
          ),
        ),
        SliverToBoxAdapter(
          child: Container(
            margin: const EdgeInsets.only(top: 15),
            decoration: const BoxDecoration(color: Colors.white),
            padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 10),
            child: Column(
              children: [
                Container(
                  alignment: Alignment.centerLeft,
                  child: Text(
                    '华为（HUAWEI）MateBook X 13英寸超轻薄微边框笔记本（i5-7200U 256G 拓展坞2K屏指纹背光 office）金',
                    style: StylesUtils.customTextStyle(
                        fontSize: StylesUtils.defaultFontSize,
                        color: ColorsUtils.color3333,
                        lineHeight: 1.2.h),
                  ),
                ),
                Container(
                  margin: const EdgeInsets.only(top: 10, bottom: 10),
                  alignment: Alignment.centerLeft,
                  child: Container(
                    constraints: const BoxConstraints.expand(width: 52, height: 22),
                    alignment: Alignment.center,
                    color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048),
                    child: Text(
                      '自营',
                      style: StylesUtils.customTextStyle(fontSize: StylesUtils.fontSize12),
                    ),
                  ),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    RichText(
                        text: TextSpan(children: [
                      TextSpan(
                          text: '¥7188.00',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.colorF95e,
                              fontSize: StylesUtils.fontSize18,
                              fontWeight: FontWeight.w700)),
                      TextSpan(
                          text: '  库存：',
                          style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color9999,
                          )),
                      TextSpan(
                          text: '999台',
                          style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color3333,
                          ))
                    ])),
                    TextButton(
                        onPressed: () {},
                        style: ButtonStyle(
                            foregroundColor: MaterialStatePropertyAll(
                                ColorsUtils.parseColorFromHexString(ColorsUtils.color9999)),
                            minimumSize: const MaterialStatePropertyAll(Size(75, 25)),
                            side: MaterialStatePropertyAll(BorderSide(
                                color: ColorsUtils.parseColorFromHexString(ColorsUtils.color9999))),
                            shape: MaterialStatePropertyAll(RoundedRectangleBorder(
                                side: BorderSide(
                                    color:
                                        ColorsUtils.parseColorFromHexString(ColorsUtils.color9999)),
                                borderRadius: BorderRadius.circular(5.r))),
                            textStyle: MaterialStatePropertyAll(StylesUtils.customTextStyle(
                                color: ColorsUtils.color9999, fontSize: StylesUtils.fontSize12))),
                        child: const Text('降价通知')),
                  ],
                )
              ],
            ),
          ),
        ),
        SliverToBoxAdapter(
          child: Container(
            margin: const EdgeInsets.only(top: 15),
            height: 40,
            padding: const EdgeInsets.symmetric(horizontal: 10),
            color: Colors.white,
            alignment: Alignment.centerLeft,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                RichText(
                    text: TextSpan(children: [
                  TextSpan(
                      text: '已选  ',
                      style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color9999, fontSize: StylesUtils.fontSize13)),
                  TextSpan(
                      text: '（流光金）i5 8G+256G,   1件',
                      style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize13)),
                ])),
                IconButton(
                    onPressed: () {
                      openSelectNum(context);
                    },
                    style: const ButtonStyle(alignment: Alignment.centerRight),
                    icon: Icon(
                      Icons.arrow_forward_ios,
                      size: 12,
                      color: ColorsUtils.parseColorFromHexString(ColorsUtils.color9999),
                    ))
              ],
            ),
          ),
        ),
        SliverToBoxAdapter(
          child: Container(
            margin: const EdgeInsets.only(top: 15),
            height: 40,
            padding: const EdgeInsets.symmetric(horizontal: 10),
            color: Colors.white,
            alignment: Alignment.centerLeft,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                RichText(
                    text: TextSpan(children: [
                  TextSpan(
                      text: '送至  ',
                      style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color9999, fontSize: StylesUtils.fontSize13)),
                  WidgetSpan(
                      child: Icon(
                        Icons.location_on_outlined,
                        size: 12,
                        color: ColorsUtils.parseColorFromHexString(ColorsUtils.color9999),
                      ),
                      alignment: PlaceholderAlignment.middle),
                  TextSpan(
                      text: '  北海市朝阳区望海大厦',
                      style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize13)),
                ])),
                IconButton(
                    onPressed: () {
                      openSelectAddress(context);
                    },
                    style: const ButtonStyle(alignment: Alignment.centerRight),
                    icon: Icon(
                      Icons.arrow_forward_ios,
                      size: 12,
                      color: ColorsUtils.parseColorFromHexString(ColorsUtils.color9999),
                    ))
              ],
            ),
          ),
        ),
        SliverToBoxAdapter(
          child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 15),
              margin: const EdgeInsets.only(top: 15),
              decoration: const BoxDecoration(
                color: Colors.white,
              ),
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        '评价（20412）',
                        style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color9999,
                          fontSize: StylesUtils.fontSize13,
                        ),
                      ),
                      RichText(
                          text: TextSpan(children: [
                        TextSpan(
                            text: '好评度 ',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize13)),
                        TextSpan(
                            text: '98%    ',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.colorF95e, fontSize: StylesUtils.fontSize13)),
                        WidgetSpan(
                            child: Icon(
                              Icons.arrow_forward_ios,
                              color: ColorsUtils.parseColorFromHexString(ColorsUtils.color9999),
                              size: 12,
                            ),
                            alignment: PlaceholderAlignment.middle)
                      ]))
                    ],
                  ),
                  for (var i = 0; i < 10; i++)
                    Column(
                      children: [
                        Container(
                            margin: const EdgeInsets.symmetric(vertical: 10),
                            height: 1,
                            color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2)),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            RichText(
                                text: TextSpan(children: [
                              const WidgetSpan(
                                  child: CircleAvatar(
                                    radius: 15,
                                    backgroundImage: NetworkImage(
                                        'https://img2.baidu.com/it/u=1074047834,768905615&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500'),
                                  ),
                                  alignment: PlaceholderAlignment.middle),
                              TextSpan(
                                  text: '  努力工作',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color6666,
                                      fontSize: StylesUtils.fontSize13))
                            ])),
                            Wrap(
                              alignment: WrapAlignment.end,
                              crossAxisAlignment: WrapCrossAlignment.center,
                              spacing: 5,
                              children: [
                                for (var i = 0; i < 5; i++)
                                  Icon(
                                    Icons.star,
                                    size: 15,
                                    color:
                                        ColorsUtils.parseColorFromHexString(ColorsUtils.colorF95e),
                                  )
                              ],
                            )
                          ],
                        ),
                        Container(
                          alignment: Alignment.centerLeft,
                          margin: const EdgeInsets.symmetric(vertical: 10),
                          child: Text(
                            '很薄，外观很美，打开之后系统很流畅，很满意的一次购买电脑，外出旅行工作携带很方便，比我的手机还要薄',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color3333,
                                fontSize: StylesUtils.fontSize13,
                                lineHeight: 1.4.h),
                          ),
                        ),
                        Container(
                          alignment: Alignment.center,
                          child: Wrap(
                            spacing: 10,
                            alignment: WrapAlignment.center,
                            crossAxisAlignment: WrapCrossAlignment.center,
                            children: [
                              for (var i = 0; i < 4; i++)
                                ClipRRect(
                                  borderRadius: BorderRadius.circular(5.r),
                                  child: CachedNetworkImage(
                                    imageUrl:
                                        'https://img.alicdn.com/img/i3/2891951486/O1CN01nYgPFQ1MqdSaJ15wq_!!2891951486-0-alimamacc.jpg_360x360xzq75.jpg_.webp',
                                    width: 80,
                                    height: 80,
                                    fit: BoxFit.fill,
                                  ),
                                )
                            ],
                          ),
                        ),
                        Container(
                          alignment: Alignment.centerLeft,
                          margin: const EdgeInsets.symmetric(vertical: 10),
                          child: Text(
                            '金色，i5 4G 256G',
                            style: StylesUtils.customTextStyle(
                              color: ColorsUtils.colorCccc,
                            ),
                          ),
                        )
                      ],
                    ),
                  Container(
                    alignment: Alignment.center,
                    child: RichText(
                      text: TextSpan(
                          text: '查看更多评价 ',
                          style: StylesUtils.customTextStyle(color: ColorsUtils.color0000),
                          children: [
                            WidgetSpan(
                                child: Icon(
                                  Icons.arrow_right,
                                  size: 20,
                                  color: ColorsUtils.parseColorFromHexString(ColorsUtils.color0000),
                                  weight: 700,
                                ),
                                alignment: PlaceholderAlignment.middle)
                          ]),
                    ),
                  ),
                ],
              )),
        ),
        SliverToBoxAdapter(
          child: Container(
            padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 15),
            margin: const EdgeInsets.only(top: 15),
            decoration: const BoxDecoration(
              color: Colors.white,
            ),
            child: Column(
              children: [
                Container(
                  alignment: Alignment.centerLeft,
                  margin: const EdgeInsets.only(bottom: 15),
                  child: Text(
                    '为你推荐',
                    style: StylesUtils.customTextStyle(
                        fontSize: StylesUtils.fontSize16, color: ColorsUtils.color3333),
                  ),
                ),
                StaggeredGrid.count(
                  crossAxisCount: 3,
                  mainAxisSpacing: 15,
                  crossAxisSpacing: 10,
                  children: [
                    for (var i = 0; i < 9; i++)
                      Column(
                        children: [
                          ClipRRect(
                            borderRadius: BorderRadius.circular(5.r),
                            child: CachedNetworkImage(
                              imageUrl:
                                  'https://img.alicdn.com/img/i4/16589544/O1CN01eCXt2B2KNCzNOqR8C_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp',
                              width: 109,
                              height: 89,
                              fit: BoxFit.fill,
                            ),
                          ),
                          Container(
                            margin: const EdgeInsets.only(top: 10, bottom: 10),
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '直降500/华为笔记本Matebook E2023新款二合一平板电脑官方旗舰官',
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color6666,
                                  fontSize: StylesUtils.fontSize12,
                                  lineHeight: 1.2.h),
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                          Align(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '￥6999',
                              style: StylesUtils.customTextStyle(
                                  fontWeight: FontWeight.w700,
                                  fontSize: StylesUtils.fontSize12,
                                  color: ColorsUtils.color0000),
                            ),
                          )
                        ],
                      ),
                  ],
                ),
                Container(
                  height: 1,
                  margin: const EdgeInsets.symmetric(vertical: 10),
                  color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2),
                ),
                Center(
                  child: Text(
                    '查看更多为你推荐',
                    style: StylesUtils.customTextStyle(color: ColorsUtils.color9999),
                  ),
                )
              ],
            ),
          ),
        ),
        SliverToBoxAdapter(
          child: Container(
            margin: const EdgeInsets.only(top: 15),
            decoration: const BoxDecoration(
              color: Colors.white,
            ),
            alignment: Alignment.center,
            height: 36,
            child: Text.rich(TextSpan(children: [
              WidgetSpan(
                  child: Icon(
                    Icons.arrow_upward,
                    size: 15,
                    color: ColorsUtils.parseColorFromHexString(ColorsUtils.color9999),
                  ),
                  alignment: PlaceholderAlignment.middle),
              TextSpan(
                  text: '上拉查看图文详情',
                  style: StylesUtils.customTextStyle(color: ColorsUtils.color9999))
            ])),
          ),
        ),
        SliverPersistentHeader(
          pinned: true,
          delegate: _MyHeaderDelegate(
              height: 44,
              child: Container(
                height: 44,
                decoration: const BoxDecoration(color: Colors.white),
                child: Row(
                  children: controller.infoTab
                      .asMap()
                      .map((key, value) => MapEntry(
                          key,
                          Expanded(
                            child: Obx(() => InkWell(
                                  onTap: () {
                                    controller.infoTabIndex.value = key;
                                  },
                                  child: Center(
                                    child: Text(
                                      value,
                                      style: activeStyle(key),
                                    ),
                                  ),
                                )),
                          )))
                      .values
                      .toList(),
                ),
              ),
              callback: (bool result) {
                // Get.log('oK=== $result');
                Get.engine.addPostFrameCallback((timeStamp) {
                  controller.isChange.value = result;
                  if (controller.isChange.isTrue) {
                    controller.animationController.reverse();
                    controller.tController.forward();
                  } else {
                    controller.animationController.forward();
                    controller.tController.reverse();
                  }
                });
              }),
        ),
        Obx(() => SliverToBoxAdapter(
              child: Stack(
                children: [
                  Visibility(
                    visible: controller.infoTabIndex.value == 0,
                    child: Container(
                      padding: const EdgeInsets.only(top: 10),
                      color: Colors.white,
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://img.axureshop.com/d6/00/9e/d6009ed3a335415196f21a199d9bad93/images/商详/u978.png',
                        width: double.infinity,
                        fit: BoxFit.fitHeight,
                      ),
                    ),
                  ),
                  Visibility(
                    visible: controller.infoTabIndex.value == 1,
                    child: Container(
                      padding: const EdgeInsets.only(top: 10),
                      color: Colors.white,
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://img.axureshop.com/d6/00/9e/d6009ed3a335415196f21a199d9bad93/images/商详/u980.png',
                        width: double.infinity,
                        fit: BoxFit.fitHeight,
                      ),
                    ),
                  ),
                  Visibility(
                    visible: controller.infoTabIndex.value == 2,
                    child: Container(
                      padding: const EdgeInsets.only(top: 10),
                      color: Colors.white,
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://img.axureshop.com/d6/00/9e/d6009ed3a335415196f21a199d9bad93/images/商详/u982.png',
                        width: double.infinity,
                        fit: BoxFit.fitHeight,
                      ),
                    ),
                  ),
                ],
              ),
            )),
      ],
    );
  }

  TextStyle activeStyle(int index) {
    if (controller.infoTabIndex.value == index) {
      return StylesUtils.customTextStyle(color: ColorsUtils.colorF048);
    }
    return StylesUtils.customTextStyle(color: ColorsUtils.color6666);
  }

  void openSelectNum(BuildContext context) {
    Get.bottomSheet(SizedBox(
      height: 350,
      child: Column(
        children: [
          Container(
            height: 70,
            decoration: BoxDecoration(
                color: Colors.white,
                border: Border(
                    bottom: BorderSide(
                        color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorE4e4)))),
            padding: const EdgeInsets.only(left: 15, right: 10),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Transform.translate(
                  offset: const Offset(0, -20),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(5),
                    child: CachedNetworkImage(
                      imageUrl:
                          'https://img.alicdn.com/img/i4/111683677/O1CN01QcX0WO1d27GrfU7LW_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp',
                      width: 85,
                      height: 77,
                      fit: BoxFit.fill,
                    ),
                  ),
                ),
                Expanded(
                    child: Container(
                  padding: const EdgeInsets.only(left: 10),
                  child: Column(
                    children: [
                      Container(
                        margin: const EdgeInsets.only(top: 10),
                        alignment: Alignment.centerLeft,
                        child: Text(
                          '¥7188.00',
                          style: StylesUtils.customTextStyle(
                            color: ColorsUtils.colorF95e,
                          ),
                        ),
                      ),
                      Container(
                        alignment: Alignment.centerLeft,
                        margin: const EdgeInsets.only(top: 10),
                        child: Text(
                          '商品编号:5145668',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color9999, fontSize: StylesUtils.fontSize12),
                        ),
                      )
                    ],
                  ),
                )),
                IconButton(
                    onPressed: () {
                      Get.back();
                    },
                    style: const ButtonStyle(alignment: Alignment.center),
                    icon: Icon(
                      Icons.close_rounded,
                      size: 20,
                      color: ColorsUtils.parseColorFromHexString(ColorsUtils.color9999),
                    ))
              ],
            ),
          ),
          Expanded(
              child: Container(
            color: Colors.white,
            padding: const EdgeInsets.only(left: 15, right: 25, top: 15),
            child: Column(
              children: [
                Container(
                  alignment: Alignment.centerLeft,
                  child: Text(
                    '数量',
                    style: StylesUtils.customTextStyle(
                      color: ColorsUtils.color9999,
                    ),
                  ),
                ),
                Obx(() => StaggeredGrid.count(
                      crossAxisCount: 2,
                      crossAxisSpacing: 30,
                      children: controller.productList
                          .asMap()
                          .map((key, value) => MapEntry(
                              key,
                              TextButton(
                                onPressed: () {
                                  controller.productIndex.value = key;
                                },
                                style: ButtonStyle(
                                    minimumSize: const MaterialStatePropertyAll(Size(140, 25)),
                                    foregroundColor: MaterialStatePropertyAll(key ==
                                            controller.productIndex.value
                                        ? ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048)
                                        : ColorsUtils.parseColorFromHexString(
                                            ColorsUtils.color3333)),
                                    textStyle: MaterialStatePropertyAll(StylesUtils.customTextStyle(
                                        fontSize: StylesUtils.fontSize12)),
                                    shape: MaterialStatePropertyAll(RoundedRectangleBorder(
                                        borderRadius: BorderRadius.circular(5),
                                        side: BorderSide(
                                            color: key == controller.productIndex.value
                                                ? ColorsUtils.parseColorFromHexString(
                                                    ColorsUtils.colorF048)
                                                : ColorsUtils.parseColorFromHexString(
                                                    ColorsUtils.colorCccc))))),
                                child: Text(value),
                              )))
                          .values
                          .toList(),
                    )),
                Container(
                  margin: const EdgeInsets.only(top: 15),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        '数量',
                        style: StylesUtils.customTextStyle(
                          color: ColorsUtils.color9999,
                        ),
                      ),
                      Wrap(
                        spacing: 0,
                        alignment: WrapAlignment.center,
                        crossAxisAlignment: WrapCrossAlignment.center,
                        children: [
                          InkWell(
                            onTap: () {
                              if (controller.productCount > 1) {
                                controller.productCount--;
                              }
                            },
                            child: Container(
                              constraints: const BoxConstraints.expand(width: 27, height: 27),
                              alignment: Alignment.center,
                              decoration: BoxDecoration(
                                  border: Border.all(
                                      color: ColorsUtils.parseColorFromHexString(
                                          ColorsUtils.colorE4e4))),
                              child: Text(
                                '➖',
                                style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize13),
                              ),
                            ),
                          ),
                          Container(
                            constraints: const BoxConstraints.expand(width: 50, height: 27),
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                                border: Border(
                              top: BorderSide(
                                  color:
                                      ColorsUtils.parseColorFromHexString(ColorsUtils.colorE4e4)),
                              bottom: BorderSide(
                                  color:
                                      ColorsUtils.parseColorFromHexString(ColorsUtils.colorE4e4)),
                            )),
                            child: Obx(() => Text(
                                  '${controller.productCount}',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color0000,
                                      fontSize: StylesUtils.fontSize12),
                                )),
                          ),
                          InkWell(
                            onTap: () {
                              controller.productCount++;
                            },
                            child: Container(
                              constraints: const BoxConstraints.expand(width: 27, height: 27),
                              alignment: Alignment.center,
                              decoration: BoxDecoration(
                                  border: Border.all(
                                      color: ColorsUtils.parseColorFromHexString(
                                          ColorsUtils.colorE4e4))),
                              child: Text(
                                '➕',
                                style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.color3333, fontSize: StylesUtils.fontSize13),
                              ),
                            ),
                          ),
                        ],
                      )
                    ],
                  ),
                )
              ],
            ),
          )),
          Container(
            height: 50,
            color: Colors.white,
            child: Row(
              children: [
                Expanded(
                    child: Container(
                  margin: const EdgeInsets.only(right: 0.5),
                  height: 50,
                  child: TextButton(
                      onPressed: () {},
                      style: ButtonStyle(
                        minimumSize: const MaterialStatePropertyAll(Size.fromHeight(50)),
                        backgroundColor: MaterialStatePropertyAll(
                            ColorsUtils.parseColorFromHexString(ColorsUtils.colorF26f)),
                        shape: const MaterialStatePropertyAll(LinearBorder()),
                      ),
                      child: Text(
                        '加入购物车',
                        style: StylesUtils.customTextStyle(),
                      )),
                )),
                Expanded(
                    child: Container(
                  margin: const EdgeInsets.only(left: 0.5),
                  height: 50,
                  child: TextButton(
                      onPressed: () {},
                      style: ButtonStyle(
                        minimumSize: const MaterialStatePropertyAll(Size.fromHeight(50)),
                        backgroundColor: MaterialStatePropertyAll(
                            ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048)),
                        shape: const MaterialStatePropertyAll(LinearBorder()),
                      ),
                      child: Text(
                        '立即购买',
                        style: StylesUtils.customTextStyle(),
                      )),
                )),
              ],
            ),
          )
        ],
      ),
    ));
  }

  void openSelectAddress(BuildContext context) {
    Get.bottomSheet(Container(
      color: Colors.white,
      height: 300,
      child: Column(
        children: [
          Stack(
            children: [
              Container(
                height: 50,
                alignment: Alignment.center,
                child: Text(
                  '配送至',
                  style: StylesUtils.customTextStyle(
                    color: ColorsUtils.color9999,
                  ),
                ),
              ),
              Positioned(
                  width: 40,
                  top: 0,
                  right: 0,
                  bottom: 0,
                  child: Center(
                    child: IconButton(
                        onPressed: () {
                          Get.back();
                        },
                        icon: Icon(
                          Icons.close_rounded,
                          size: 20,
                          color: ColorsUtils.parseColorFromHexString(ColorsUtils.color9999),
                        )),
                  ))
            ],
          ),
          Expanded(
              child: ListView.builder(
            itemBuilder: (_, index) {
              return InkWell(
                onTap: () {
                  controller.addressIndex.value = index;
                },
                child: Container(
                  decoration: BoxDecoration(
                      border: Border(
                          top: BorderSide(
                              color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2)))),
                  padding: const EdgeInsets.symmetric(horizontal: 15),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Center(
                        child: Icon(
                          Icons.location_on_outlined,
                          size: 20,
                          color: ColorsUtils.parseColorFromHexString(ColorsUtils.color9999),
                        ),
                      ),
                      Expanded(
                          child: Container(
                        alignment: Alignment.centerLeft,
                        padding: const EdgeInsets.only(left: 10),
                        child: Text(
                          controller.addressList[index],
                          style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                          maxLines: 2,
                          overflow: TextOverflow.ellipsis,
                          textAlign: TextAlign.left,
                        ),
                      )),
                      Center(
                        child: Obx(() => Visibility(
                              visible: controller.addressIndex.value == index,
                              child: SvgUtils.assetName('u5653', width: 15, height: 12),
                            )),
                      )
                    ],
                  ),
                ),
              );
            },
            itemExtent: 50,
            itemCount: controller.addressList.length,
          )),
        ],
      ),
    ));
  }

  Widget buildInfoBody(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverPersistentHeader(
          pinned: true,
          delegate: _MyHeaderDelegate(
              height: 44,
              child: Container(
                height: 44,
                decoration: const BoxDecoration(color: Colors.white),
                child: Row(
                  children: controller.infoTab
                      .asMap()
                      .map((key, value) => MapEntry(
                          key,
                          Expanded(
                            child: Obx(() => InkWell(
                                  onTap: () {
                                    controller.infoTabIndex.value = key;
                                  },
                                  child: Center(
                                    child: Text(
                                      value,
                                      style: activeStyle(key),
                                    ),
                                  ),
                                )),
                          )))
                      .values
                      .toList(),
                ),
              )),
        ),
        Obx(() => SliverToBoxAdapter(
              child: Stack(
                children: [
                  Visibility(
                    visible: controller.infoTabIndex.value == 0,
                    child: Container(
                      padding: const EdgeInsets.only(top: 10),
                      color: Colors.white,
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://img.axureshop.com/d6/00/9e/d6009ed3a335415196f21a199d9bad93/images/商详/u978.png',
                        width: double.infinity,
                        fit: BoxFit.fitHeight,
                      ),
                    ),
                  ),
                  Visibility(
                    visible: controller.infoTabIndex.value == 1,
                    child: Container(
                      padding: const EdgeInsets.only(top: 10),
                      color: Colors.white,
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://img.axureshop.com/d6/00/9e/d6009ed3a335415196f21a199d9bad93/images/商详/u980.png',
                        width: double.infinity,
                        fit: BoxFit.fitHeight,
                      ),
                    ),
                  ),
                  Visibility(
                    visible: controller.infoTabIndex.value == 2,
                    child: Container(
                      padding: const EdgeInsets.only(top: 10),
                      color: Colors.white,
                      child: CachedNetworkImage(
                        imageUrl:
                            'https://img.axureshop.com/d6/00/9e/d6009ed3a335415196f21a199d9bad93/images/商详/u982.png',
                        width: double.infinity,
                        fit: BoxFit.fitHeight,
                      ),
                    ),
                  ),
                ],
              ),
            )),
      ],
    );
  }

  Widget buildEvaluateBody(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverPersistentHeader(
            delegate: _MyHeaderDelegate(
                child: Container(
                  height: 50,
                  color: Colors.white,
                  alignment: Alignment.centerLeft,
                  padding: const EdgeInsets.symmetric(horizontal: 15),
                  child: Wrap(
                    spacing: 10,
                    alignment: WrapAlignment.start,
                    crossAxisAlignment: WrapCrossAlignment.center,
                    children: controller.evaluateList
                        .asMap()
                        .map((key, value) => MapEntry(
                            key,
                            Obx(() => TextButton(
                                  onPressed: () {
                                    controller.evaluateIndex.value = key;
                                  },
                                  style: ButtonStyle(
                                      padding: const MaterialStatePropertyAll(EdgeInsets.zero),
                                      fixedSize: const MaterialStatePropertyAll(Size(76, 25)),
                                      minimumSize: const MaterialStatePropertyAll(Size(76, 25)),
                                      alignment: Alignment.center,
                                      shape: MaterialStatePropertyAll(RoundedRectangleBorder(
                                          borderRadius: BorderRadius.circular(5),
                                          side: BorderSide(
                                            color: activeColor(key),
                                          )))),
                                  child: Text(
                                    value,
                                    style: getActiveStyle(key),
                                  ),
                                ))))
                        .values
                        .toList(),
                  ),
                ),
                height: 50)),
        SliverToBoxAdapter(
          child: Container(
            margin: const EdgeInsets.only(top: 15),
            color: Colors.white,
            padding: const EdgeInsets.symmetric(horizontal: 10),
            child: Column(
              children: [
                for (var i = 0; i < 10; i++)
                  Padding(
                    padding: const EdgeInsets.only(top: 10),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        CircleAvatar(
                          radius: 15,
                          backgroundColor:
                              ColorsUtils.parseColorFromHexString(ColorsUtils.colorF26f),
                          backgroundImage: const NetworkImage(
                              'https://img0.baidu.com/it/u=3762686575,934747082&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500'),
                        ),
                        Expanded(
                            child: Container(
                          padding: const EdgeInsets.only(left: 10),
                          child: Column(
                            children: [
                              Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Text(
                                    '永远的风',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color6666,
                                        fontSize: StylesUtils.fontSize13),
                                  ),
                                  Text(
                                    '2024-10-15',
                                    style: StylesUtils.customTextStyle(
                                        color: ColorsUtils.color9999,
                                        fontSize: StylesUtils.fontSize12),
                                  ),
                                ],
                              ),
                              Container(
                                alignment: Alignment.centerLeft,
                                margin: const EdgeInsets.only(top: 10),
                                child: Wrap(
                                  spacing: 5,
                                  alignment: WrapAlignment.start,
                                  crossAxisAlignment: WrapCrossAlignment.center,
                                  children: [
                                    for (var i = 0; i < 5; i++)
                                      Icon(
                                        Icons.star,
                                        size: 15,
                                        color: ColorsUtils.parseColorFromHexString(
                                            ColorsUtils.colorF95e),
                                      ),
                                  ],
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 15),
                                alignment: Alignment.centerLeft,
                                child: Text(
                                  '电脑简直是漂亮的不要不要的，上是网上看了看，想买15.6屏幕的D来着，后来去了实体店看了实物',
                                  maxLines: 2,
                                  overflow: TextOverflow.ellipsis,
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color3333,
                                      fontSize: StylesUtils.fontSize13,
                                      lineHeight: 1.2.h),
                                ),
                              ),
                              Container(
                                alignment: Alignment.centerLeft,
                                margin: const EdgeInsets.only(top: 15),
                                child: Wrap(
                                  spacing: 10,
                                  runSpacing: 10,
                                  alignment: WrapAlignment.start,
                                  crossAxisAlignment: WrapCrossAlignment.center,
                                  children: [
                                    ClipRRect(
                                      borderRadius: BorderRadius.circular(5),
                                      child: CachedNetworkImage(
                                        imageUrl:
                                            'https://img.alicdn.com/img/i3/2891951486/O1CN01nYgPFQ1MqdSaJ15wq_!!2891951486-0-alimamacc.jpg_360x360xzq75.jpg_.webp',
                                        width: 90.w,
                                        height: 80.h,
                                        fit: BoxFit.fill,
                                      ),
                                    ),
                                    ClipRRect(
                                      borderRadius: BorderRadius.circular(5),
                                      child: CachedNetworkImage(
                                        imageUrl:
                                            'https://img.alicdn.com/img/i1/5064056147/O1CN01CvrRuv1vHNXkiKnK2_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp',
                                        width: 90.w,
                                        height: 80.h,
                                        fit: BoxFit.fill,
                                      ),
                                    ),
                                    ClipRRect(
                                      borderRadius: BorderRadius.circular(5),
                                      child: CachedNetworkImage(
                                        imageUrl:
                                            'https://img.alicdn.com/img/i1/34403627/O1CN011MJIoU1cfDTJlm0T9_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp',
                                        width: 90.w,
                                        height: 80.h,
                                        fit: BoxFit.fill,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                              Container(
                                alignment: Alignment.centerLeft,
                                margin: const EdgeInsets.only(top: 10, bottom: 10),
                                child: Text(
                                  '金色，i5 4G 256G',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color9999,
                                      fontSize: StylesUtils.fontSize13),
                                ),
                              ),
                              Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Text(
                                    '2023-12-01',
                                    style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color9999,
                                      fontSize: StylesUtils.fontSize13,
                                    ),
                                  ),
                                  Wrap(
                                    crossAxisAlignment: WrapCrossAlignment.center,
                                    alignment: WrapAlignment.end,
                                    spacing: 20,
                                    children: [
                                      Text.rich(TextSpan(children: [
                                        WidgetSpan(
                                            child:
                                                SvgUtils.assetName('u1084', width: 15, height: 15),
                                            alignment: PlaceholderAlignment.middle),
                                        TextSpan(
                                            text: ' 20',
                                            style: StylesUtils.customTextStyle(
                                                color: ColorsUtils.color3333,
                                                fontSize: StylesUtils.fontSize13))
                                      ])),
                                      Text.rich(TextSpan(children: [
                                        WidgetSpan(
                                            child:
                                                SvgUtils.assetName('u1085', width: 15, height: 15),
                                            alignment: PlaceholderAlignment.middle),
                                        TextSpan(
                                            text: ' 15',
                                            style: StylesUtils.customTextStyle(
                                                color: ColorsUtils.color3333,
                                                fontSize: StylesUtils.fontSize13))
                                      ])),
                                    ],
                                  )
                                ],
                              ),
                              Container(
                                height: 1,
                                margin: const EdgeInsets.only(top: 10),
                                color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2),
                              )
                            ],
                          ),
                        ))
                      ],
                    ),
                  ),
              ],
            ),
          ),
        )
      ],
    );
  }

  Color activeColor(int index) {
    if (controller.evaluateIndex.value == index) {
      return ColorsUtils.parseColorFromHexString(ColorsUtils.colorFf00);
    }
    return ColorsUtils.parseColorFromHexString(ColorsUtils.color9999);
  }

  TextStyle getActiveStyle(int index) {
    if (controller.evaluateIndex.value == index) {
      return StylesUtils.customTextStyle(
        color: ColorsUtils.colorFf00,
        fontSize: StylesUtils.fontSize12,
      );
    }
    return StylesUtils.customTextStyle(
      color: ColorsUtils.color9999,
      fontSize: StylesUtils.fontSize12,
    );
  }
}

class _MyHeaderDelegate extends SliverPersistentHeaderDelegate {
  final double height;

  final Widget child;

  final void Function(bool result)? callback;

  _MyHeaderDelegate({required this.child, this.height = 44.0, this.callback});

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    Get.log(
        'shrinkOffset = $shrinkOffset \toverlapsContent = $overlapsContent  \tresult = $height');
    callback?.call((height == shrinkOffset));
    return child;
  }

  @override
  double get maxExtent => height;

  @override
  double get minExtent => height;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return maxExtent != oldDelegate.maxExtent && minExtent != oldDelegate.minExtent;
  }
}
